<template>
  <div>
    服务器: {{svrName}} &nbsp;
    端口: {{port}} <br />
    数据库: {{dbName}} &nbsp;
    用户名: {{username}}
    <div>
      <el-row :gutter="10">
        <el-col :span="14">
          <div>
            <el-input v-model="inputFileDes" placeholder="请输入报告名" size="large"></el-input>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <el-button type="primary" @click='newDBReport'
              :loading="btnNrpLoading">{{btnNrpTitle}}</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>
            <el-transfer v-model="rightDD" :right-default-checked="rightChecked"
          :data="dbReportList" @right-check-change="rightCheckChange" @change="DBReportChange"
          :titles="['报告文件', '待比对文件']"></el-transfer>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="14">
          <div>
            <el-input v-model="compareFileDes" placeholder="请输入比对文件名" size="large"></el-input>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <el-button type="primary" @click="newCompareReport"
              :disabled="newCRDisabled" :loading="btnNcrLoading">{{btnNcrTitle}}</el-button>
          </div>
        </el-col>
      </el-row>
      <el-input type="textarea" :rows="10" placeholder="显示比对结果" v-model="compareResult"> </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SQLDBCompare',
  data: function () {
    return {
      svrName: '',
      port: '',
      dbName: '',
      username: '',
      newRpDisabled: true, // "新建扫描报告"按钮是否无效
      btnNrpTitle: '生成新的扫描报告', // 按钮上显示的内容
      btnNrpLoading: false, // "新建扫描报告"按钮是否处于加载模式
      newCRDisabled: true, // "新建比对报告"按钮是否无效
      btnNcrTitle: '生成新的比对报告', // 按钮上显示的内容
      btnNcrLoading: false, // "新建比对报告"按钮是否处于加载模式
      inputFileDes: '', // 扫描报告名
      compareFileDes: '', // 比对文件名
      dbReportList: [], // all record
      rightDD: [], // default add to right record
      rightChecked: [], // right-checked
      compareResult: ''
    }
  },
  methods: {
    getDBSInfo () {
      this.axios.get('/dbServer-info', {
        // 不带任何参数向后台请求数据
      })
        .then(this.getDBSInfoSucc)
        .catch(function (error) {
          console.log(error)
        })
    },
    getDBSInfoSucc (response) {
      // 数据返回后行为
      const resData = response.data
      this.svrName = resData.serverName
      this.port = resData.port
      this.dbName = resData.databaseName
      this.username = resData.userName
    },
    getDBReportList () {
      this.axios.get('/report-list', {
        // 向后台请求文件列表
      })
        .then(this.getDBReportListSucc)
        .catch(function (error) {
          console.log(error)
        })
    },
    getDBReportListSucc (response) {
      const dbRL = response.data.dbReportList
      if (dbRL.length > 0) {
        for (let i = 0; i < dbRL.length; ++i) {
          this.dbReportList.push({
            'key': dbRL[i],
            'label': dbRL[i]
          })
        }
      }
      this.refreshTran()
    },
    refreshTran () {
      // 刷新控件, 将左侧最后两个文件移到右侧并选中
      let dbRL = this.dbReportList
      if (dbRL.length >= 2) {
        this.rightDD.length = 0
        this.rightDD.push(dbRL[dbRL.length - 2].key)
        this.rightDD.push(dbRL[dbRL.length - 1].key)
        this.rightChecked = this.rightDD.concat()
        this.rightCheckChange(this.rightChecked)
      }
    },
    newDBReport () {
      // 进行一次新的扫描
      this.btnNrpLoading = true
      this.btnNrpTitle = '正在扫描数据库...'
      this.axios.get('/new-dbreport', {})
        .then(this.insertNewDBReportFilename)
        .catch(function (error) {
          console.log(error)
        })
    },
    insertNewDBReportFilename (response) {
      const newDBRF = response.data.newDBReportFilename
      this.dbReportList.push({'key': newDBRF, 'label': newDBRF})
      this.refreshTran()
      this.btnNrpLoading = false
      this.btnNrpTitle = '生成新的扫描报告'
    },
    rightCheckChange (rightChosed, rightChanged) {
      // disable newCompareReport button according to checked file count
      this.rightChecked = rightChosed
      if (rightChosed.length === 2) {
        this.newCRDisabled = false
      } else {
        this.newCRDisabled = true
      }
    },
    newCompareReport () {
      // compare two choosed files
      this.btnNcrTitle = '正在比对...'
      this.btnNcrLoading = true
      this.axios.get('/compare-db', {
        params: {'firstCompareFile': this.rightChecked[0],
          'secondCompareFile': this.rightChecked[1],
          'compareFileDes': this.compareFileDes}
      })
        .then(this.getCompareSucc)
        .catch(function (err) {
          console.log(err)
        })
    },
    getCompareSucc (response) {
      this.compareResult = response.data.compareResult
      this.btnNcrTitle = '生成新的比对报告'
      this.btnNcrLoading = false
      if (this.compareResult) {
        this.compareFileDes = ''
      }
    },
    DBReportChange (currentList, direct, sendList) {
      if (direct === 'left') {
        // move from right to left
        if (currentList.length === 0) {
          // There is empty in right box
          this.rightChecked.length = 0
          // this.rightCheckChange(this.rightChecked)
          return
        }
        let tmpRC = []
        for (var i = 0; i < this.rightChecked.length; ++i) {
          let j
          for (j = 0; j < sendList.length; ++j) {
            if (sendList[j] === this.rightChecked[i]) {
              break
            }
          }
          if (j === sendList.length) {
            // this.rightChecked[i] 没有被移动
            tmpRC.push(this.rightChecked[i])
          }
        }
        this.rightChecked = tmpRC
      }
    }
  },
  // watch: {
  //   rightChecked: function (val) {
  //     this.rightCheckChange(val)
  //   }
  // },
  mounted () {
    // 组件挂载到页面时向后台请求数据
    this.getDBSInfo()
    this.getDBReportList()
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 10px
  }
</style>
